<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<jsp:include page="/commonPart/htmlHeader1.jsp">
	<jsp:param name="title" value="CommonWorld" />
</jsp:include>
<body>
<jsp:include page= "/commonPart/bodyHeader1.jsp" ></jsp:include>
<div id = "banner">
	<div class = "wp998">
		<a id = "logo" href = "${initParam.webRootUrl}" style = "border-right: none;" >CommonWorld</a>
		<div class = "clear"></div>
	</div>
</div>
<div id = "CW_Screen">
	<div id = "CW_Content" class = "CenterDiv">
		<style>
			#BlogsList {width: 100%;}
			.BlogList {margin: 10px 5px;}
			.BlogList a {text-decoration: none;}
			#RecommBlogs {margin-bottom: 20px; background: #fff;}
			#RecommBlogs .BlogList li {float: left; width: 49%;}
			#RecommBlogs .BlogList li.col_0 {margin-left: 10px;}
			#RecommBlogs .BlogList li.sec {height: 18px; overflow: hidden; margin-bottom: 5px;}
			#RecommBlogs .BlogList li.sec a {background: url('/images/a3.gif') no-repeat left center; padding-left: 10px;}
			
			#RecentBlogs {margin: 0 0 20px 0; background: #fff}
			#RecentBlogs .BlogList li {margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #ddd; overflow: hidden;}
			#RecentBlogs .BlogList li h3 {font-size: 10.5pt; margin: 0 0 5px 0;}
			#RecentBlogs .BlogList li .u {float: left; width: 40px;}
			#RecentBlogs .BlogList li .u img {width: 32px; height: 32px; margin: 3px 0 0 5px;}
			#RecentBlogs .BlogList li .b {margin-left: 50px;}
			#RecentBlogs .BlogList li p {font-size: 9pt; color: #666; line-height: 18px;}
			#RecentBlogs .BlogList li .date {color: #666; margin: 10px 0 0 0;}
		</style>
		<style>
			.icon {width: 20px; height: 20px; vertical-align: middle; display: inline-block; font-size: 14px; text-align: center; color: #fff; font-weight: bold;}
		</style>
		<div id = "BlogChannel">
			<div id = "BlogsList">
				<div id = "RecommBlogs" class = "panel">
					<h3 class = "tabs">
						<ul>
							<li><a name = "recomm" ref = "HotBlogList" class = "active">本周热门</a></li>
						</ul>
					</h3>
					<ul class = "BlogList" id = "HotBlogList">
						<c:forEach items= "${hotBlogs}" var="hotBlog" varStatus="status">
							<li class = "sec col_${status.index % 2}">
								<a href = "${hotBlog.url}" target="_blank">${hotBlog.title}</a>
							</li>
						</c:forEach>
					</ul>
					<div class = "clear"></div>
				</div>
				<div id = "RecentBlogs" class = "panel">
					<h3 class = "header">
						<a name = "recent"></a>
						最新博文
						<span class = "desc">显示最新的500篇</span>
					</h3>
					<ul class = "BlogList">
						<c:forEach items="${recentBlogs}" var="blog">
							<li>
								<a href = "${blog.userHome}" class = "u" target="_blank">
								<img src = "${blog.userHeadImage}" align = "absmiddle" alt = "${blog.userName}" title = "${blog.userName}" class = "SmallPortrait" />
								</a>
								<div class = "b">
									<h3>
										<a href = "${blog.blogHome}" target="_blank">${blog.title}</a>
										<span class = "icon" style = "background: ${blog.type == '原创' ? '#44ac57' : '#799acc'};" title = "${blog.type == '原创' ? '原创博客' : '转帖博客'}">${blog.type == '原创' ? '原' : '转'}</span>
									</h3>
									<p></p>
									<div class = "date">${blog.userName}发布于  ${blog.writeDateInterval}</div>
								</div>
							</li>
						</c:forEach>
					</ul>
					<ul class = "pager">
						<c:if test="${currentPage > 1}">
							<li class = "page prev">
								<a href = "?p=${currentPage - 1}">&lt;</a>
							</li>
						</c:if>
						<c:if test = "${beginIndex > 1 }">
							<li class = "page">
								<a href = "?p=1">1</a>
							</li>
						</c:if>
						<c:forEach items="${pages}" var = "page">
							<li class = "page ${currentPage == page ? 'current' : ''}">
								<a href = "?p=${page}">${page}</a>
							</li>
						</c:forEach>
						<c:if test = "${endIndex < totalPage}">
							<li class = "page">
								<a href = "?p=${totalPage}">${totalPage}</a>
							</li>
						</c:if>
						<c:if test = "${currentPage < totalPage}">
							<li class = "page next">
								<a href = "?p=${currentPage + 1}">&gt;</a>
							</li>
						</c:if>
					</ul>
				</div>
			</div>
			<div class = "clear"></div>
		</div>
	</div>
	<div id = "footer"></div>
</div>
</body>
</html>